').html(content).find(current.selector); } else if (isQuery(content)) { if (!content.data(placeholder)) { content.data(placeholder, $('

').insertAfter( content ).hide() ); } content = content.show().detach(); current.wrap.bind('onReset', function () { if ($(this).find(content).length) { content.hide().replaceAll( content.data(placeholder) ).data(placeholder, false); } }); } break; case 'image': content = current.tpl.image.replace('{href}', href); break; case 'swf': content = '

'; break; } if (!(isQuery(content) && content.parent().is(current.inner))) { current.inner.append( content ); } // Give a chance for helpers or callbacks to update elements F.trigger('beforeShow'); // Set scrolling before calculating dimensions current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling)); // Set initial dimensions and start position F._setDimension(); F.reposition(); F.isOpen = false; F.coming = null; F.bindEvents(); if (!F.isOpened) { $('.fancybox-wrap').not( current.wrap ).stop(true).trigger('onReset').remove(); } else if (previous.prevMethod) { F.transitions[ previous.prevMethod ](); } F.transitions[ F.isOpened ? current.nextMethod : current.openMethod ](); F._preloadImages(); }, _setDimension: function () { var viewport = F.getViewport(), steps = 0, canShrink = false, canExpand = false, wrap = F.wrap, skin = F.skin, inner = F.inner, current = F.current, width = current.width, height = current.height, minWidth = current.minWidth, minHeight = current.minHeight, maxWidth = current.maxWidth, maxHeight = current.maxHeight, scrolling = current.scrolling, scrollOut = current.scrollOutside ? current.scrollbarWidth : 0, margin = current.margin, wMargin = getScalar(margin[1] + margin[3]), hMargin = getScalar(margin[0] + margin[2]), wPadding, hPadding, wSpace, hSpace, origWidth, origHeight, origMaxWidth, origMaxHeight, ratio, width_, height_, maxWidth_, maxHeight_, iframe, body; // Reset dimensions so we could re-check actual size wrap.add(skin).add(inner).width('auto').height('auto').removeClass('fancybox-tmp'); wPadding = getScalar(skin.outerWidth(true) - skin.width()); hPadding = getScalar(skin.outerHeight(true) - skin.height()); // Any space between content and viewport (margin, padding, border, title) wSpace = wMargin + wPadding; hSpace = hMargin + hPadding; origWidth = isPercentage(width) ? (viewport.w - wSpace) * getScalar(width) / 100 : width; origHeight = isPercentage(height) ? (viewport.h - hSpace) * getScalar(height) / 100 : height; if (current.type === 'iframe') { iframe = current.content; if (current.autoHeight && iframe.data('ready') === 1) { try { if (iframe[0].contentWindow.document.location) { inner.width( origWidth ).height(9999); body = iframe.contents().find('body'); if (scrollOut) { body.css('overflow-x', 'hidden'); } origHeight = body.outerHeight(true); } } catch (e) {} } } else if (current.autoWidth || current.autoHeight) { inner.addClass( 'fancybox-tmp' ); // Set width or height in case we need to calculate only one dimension if (!current.autoWidth) { inner.width( origWidth ); } if (!current.autoHeight) { inner.height( origHeight ); } if (current.autoWidth) { origWidth = inner.width(); } if (current.autoHeight) { origHeight = inner.height(); } inner.removeClass( 'fancybox-tmp' ); } width = getScalar( origWidth ); height = getScalar( origHeight ); ratio = origWidth / origHeight; // Calculations for the content minWidth = getScalar(isPercentage(minWidth) ? getScalar(minWidth, 'w') - wSpace : minWidth); maxWidth = getScalar(isPercentage(maxWidth) ? getScalar(maxWidth, 'w') - wSpace : maxWidth); minHeight = getScalar(isPercentage(minHeight) ? getScalar(minHeight, 'h') - hSpace : minHeight); maxHeight = getScalar(isPercentage(maxHeight) ? getScalar(maxHeight, 'h') - hSpace : maxHeight); // These will be used to determine if wrap can fit in the viewport origMaxWidth = maxWidth; origMaxHeight = maxHeight; if (current.fitToView) { maxWidth = Math.min(viewport.w - wSpace, maxWidth); maxHeight = Math.min(viewport.h - hSpace, maxHeight); } maxWidth_ = viewport.w - wMargin; maxHeight_ = viewport.h - hMargin; if (current.aspectRatio) { if (width > maxWidth) { width = maxWidth; height = getScalar(width / ratio); } if (height > maxHeight) { height = maxHeight; width = getScalar(height * ratio); } if (width < minWidth) { width = minWidth; height = getScalar(width / ratio); } if (height < minHeight) { height = minHeight; width = getScalar(height * ratio); } } else { width = Math.max(minWidth, Math.min(width, maxWidth)); if (current.autoHeight && current.type !== 'iframe') { inner.width( width ); height = inner.height(); } height = Math.max(minHeight, Math.min(height, maxHeight)); } // Try to fit inside viewport (including the title) if (current.fitToView) { inner.width( width ).height( height ); wrap.width( width + wPadding ); // Real wrap dimensions width_ = wrap.width(); height_ = wrap.height(); if (current.aspectRatio) { while ((width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight) { if (steps++ > 19) { break; } height = Math.max(minHeight, Math.min(maxHeight, height - 10)); width = getScalar(height * ratio); if (width < minWidth) { width = minWidth; height = getScalar(width / ratio); } if (width > maxWidth) { width = maxWidth; height = getScalar(width / ratio); } inner.width( width ).height( height ); wrap.width( width + wPadding ); width_ = wrap.width(); height_ = wrap.height(); } } else { width = Math.max(minWidth, Math.min(width, width - (width_ - maxWidth_))); height = Math.max(minHeight, Math.min(height, height - (height_ - maxHeight_))); } } if (scrollOut && scrolling === 'auto' && height < origHeight && (width + wPadding + scrollOut) < maxWidth_) { width += scrollOut; } inner.width( width ).height( height ); wrap.width( width + wPadding ); width_ = wrap.width(); height_ = wrap.height(); canShrink = (width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight; canExpand = current.aspectRatio ? (width < origMaxWidth && height < origMaxHeight && width < origWidth && height < origHeight) : ((width < origMaxWidth || height < origMaxHeight) && (width < origWidth || height < origHeight)); $.extend(current, { dim : { width : getValue( width_ ), height : getValue( height_ ) }, origWidth : origWidth, origHeight : origHeight, canShrink : canShrink, canExpand : canExpand, wPadding : wPadding, hPadding : hPadding, wrapSpace : height_ - skin.outerHeight(true), skinSpace : skin.height() - height }); if (!iframe && current.autoHeight && height > minHeight && height < maxHeight && !canExpand) { inner.height('auto'); } }, _getPosition: function (onlyAbsolute) { var current = F.current, viewport = F.getViewport(), margin = current.margin, width = F.wrap.width() + margin[1] + margin[3], height = F.wrap.height() + margin[0] + margin[2], rez = { position: 'absolute', top : margin[0], left : margin[3] }; if (current.autoCenter && current.fixed && !onlyAbsolute && height <= viewport.h && width <= viewport.w) { rez.position = 'fixed'; } else if (!current.locked) { rez.top += viewport.y; rez.left += viewport.x; } rez.top = getValue(Math.max(rez.top, rez.top + ((viewport.h - height) * current.topRatio))); rez.left = getValue(Math.max(rez.left, rez.left + ((viewport.w - width) * current.leftRatio))); return rez; }, _afterZoomIn: function () { var current = F.current; if (!current) { return; } F.isOpen = F.isOpened = true; F.wrap.css('overflow', 'visible').addClass('fancybox-opened'); F.update(); // Assign a click event if ( current.closeClick || (current.nextClick && F.group.length > 1) ) { F.inner.css('cursor', 'pointer').bind('click.fb', function(e) { if (!$(e.target).is('a') && !$(e.target).parent().is('a')) { e.preventDefault(); F[ current.closeClick ? 'close' : 'next' ](); } }); } // Create a close button if (current.closeBtn) { $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', function(e) { e.preventDefault(); F.close(); }); } // Create navigation arrows if (current.arrows && F.group.length > 1) { if (current.loop || current.index > 0) { $(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev); } if (current.loop || current.index < F.group.length - 1) { $(current.tpl.next).appendTo(F.outer).bind('click.fb', F.next); } } F.trigger('afterShow'); // Stop the slideshow if this is the last item if (!current.loop && current.index === current.group.length - 1) { F.play( false ); } else if (F.opts.autoPlay && !F.player.isActive) { F.opts.autoPlay = false; F.play(); } }, _afterZoomOut: function ( obj ) { obj = obj || F.current; $('.fancybox-wrap').trigger('onReset').remove(); $.extend(F, { group : {}, opts : {}, router : false, current : null, isActive : false, isOpened : false, isOpen : false, isClosing : false, wrap : null, skin : null, outer : null, inner : null }); F.trigger('afterClose', obj); } }); /* * Default transitions */ F.transitions = { getOrigPosition: function () { var current = F.current, element = current.element, orig = current.orig, pos = {}, width = 50, height = 50, hPadding = current.hPadding, wPadding = current.wPadding, viewport = F.getViewport(); if (!orig && current.isDom && element.is(':visible')) { orig = element.find('img:first'); if (!orig.length) { orig = element; } } if (isQuery(orig)) { pos = orig.offset(); if (orig.is('img')) { width = orig.outerWidth(); height = orig.outerHeight(); } } else { pos.top = viewport.y + (viewport.h - height) * current.topRatio; pos.left = viewport.x + (viewport.w - width) * current.leftRatio; } if (F.wrap.css('position') === 'fixed' || current.locked) { pos.top -= viewport.y; pos.left -= viewport.x; } pos = { top : getValue(pos.top - hPadding * current.topRatio), left : getValue(pos.left - wPadding * current.leftRatio), width : getValue(width + wPadding), height : getValue(height + hPadding) }; return pos; }, step: function (now, fx) { var ratio, padding, value, prop = fx.prop, current = F.current, wrapSpace = current.wrapSpace, skinSpace = current.skinSpace; if (prop === 'width' || prop === 'height') { ratio = fx.end === fx.start ? 1 : (now - fx.start) / (fx.end - fx.start); if (F.isClosing) { ratio = 1 - ratio; } padding = prop === 'width' ? current.wPadding : current.hPadding; value = now - padding; F.skin[ prop ]( getScalar( prop === 'width' ? value : value - (wrapSpace * ratio) ) ); F.inner[ prop ]( getScalar( prop === 'width' ? value : value - (wrapSpace * ratio) - (skinSpace * ratio) ) ); } }, zoomIn: function () { var current = F.current, startPos = current.pos, effect = current.openEffect, elastic = effect === 'elastic', endPos = $.extend({opacity : 1}, startPos); // Remove "position" property that breaks older IE delete endPos.position; if (elastic) { startPos = this.getOrigPosition(); if (current.openOpacity) { startPos.opacity = 0.1; } } else if (effect === 'fade') { startPos.opacity = 0.1; } F.wrap.css(startPos).animate(endPos, { duration : effect === 'none' ? 0 : current.openSpeed, easing : current.openEasing, step : elastic ? this.step : null, complete : F._afterZoomIn }); }, zoomOut: function () { var current = F.current, effect = current.closeEffect, elastic = effect === 'elastic', endPos = {opacity : 0.1}; if (elastic) { endPos = this.getOrigPosition(); if (current.closeOpacity) { endPos.opacity = 0.1; } } F.wrap.animate(endPos, { duration : effect === 'none' ? 0 : current.closeSpeed, easing : current.closeEasing, step : elastic ? this.step : null, complete : F._afterZoomOut }); }, changeIn: function () { var current = F.current, effect = current.nextEffect, startPos = current.pos, endPos = { opacity : 1 }, direction = F.direction, distance = 200, field; startPos.opacity = 0.1; if (effect === 'elastic') { field = direction === 'down' || direction === 'up' ? 'top' : 'left'; if (direction === 'down' || direction === 'right') { startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance); endPos[ field ] = '+=' + distance + 'px'; } else { startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance); endPos[ field ] = '-=' + distance + 'px'; } } // Workaround for http://bugs.jquery.com/ticket/12273 if (effect === 'none') { F._afterZoomIn(); } else { F.wrap.css(startPos).animate(endPos, { duration : current.nextSpeed, easing : current.nextEasing, complete : F._afterZoomIn }); } }, changeOut: function () { var previous = F.previous, effect = previous.prevEffect, endPos = { opacity : 0.1 }, direction = F.direction, distance = 200; if (effect === 'elastic') { endPos[ direction === 'down' || direction === 'up' ? 'top' : 'left' ] = ( direction === 'up' || direction === 'left' ? '-' : '+' ) + '=' + distance + 'px'; } previous.wrap.animate(endPos, { duration : effect === 'none' ? 0 : previous.prevSpeed, easing : previous.prevEasing, complete : function () { $(this).trigger('onReset').remove(); } }); } }; /* * Overlay helper */ F.helpers.overlay = { defaults : { closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay speedOut : 200, // duration of fadeOut animation showEarly : true, // indicates if should be opened immediately or wait until the content is ready css : {}, // custom CSS properties locked : !isTouch, // if true, the content will be locked into overlay fixed : true // if false, the overlay CSS position property will not be set to "fixed" }, overlay : null, // current handle fixed : false, // indicates if the overlay has position "fixed" el : $('html'), // element that contains "the lock" // Public methods create : function(opts) { opts = $.extend({}, this.defaults, opts); if (this.overlay) { this.close(); } this.overlay = $('

').appendTo( F.coming ? F.coming.parent : opts.parent ); this.fixed = false; if (opts.fixed && F.defaults.fixed) { this.overlay.addClass('fancybox-overlay-fixed'); this.fixed = true; } }, open : function(opts) { var that = this; opts = $.extend({}, this.defaults, opts); if (this.overlay) { this.overlay.unbind('.overlay').width('auto').height('auto'); } else { this.create(opts); } if (!this.fixed) { W.bind('resize.overlay', $.proxy( this.update, this) ); this.update(); } if (opts.closeClick) { this.overlay.bind('click.overlay', function(e) { if ($(e.target).hasClass('fancybox-overlay')) { if (F.isActive) { F.close(); } else { that.close(); } return false; } }); } this.overlay.css( opts.css ).show(); }, close : function() { var scrollV, scrollH; W.unbind('resize.overlay'); if (this.el.hasClass('fancybox-lock')) { $('.fancybox-margin').removeClass('fancybox-margin'); scrollV = W.scrollTop(); scrollH = W.scrollLeft(); this.el.removeClass('fancybox-lock'); W.scrollTop( scrollV ).scrollLeft( scrollH ); } $('.fancybox-overlay').remove().hide(); $.extend(this, { overlay : null, fixed : false }); }, // Private, callbacks update : function () { var width = '100%', offsetWidth; // Reset width/height so it will not mess this.overlay.width(width).height('100%'); // jQuery does not return reliable result for IE if (IE) { offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); if (D.width() > offsetWidth) { width = D.width(); } } else if (D.width() > W.width()) { width = D.width(); } this.overlay.width(width).height(D.height()); }, // This is where we can manipulate DOM, because later it would cause iframes to reload onReady : function (opts, obj) { var overlay = this.overlay; $('.fancybox-overlay').stop(true, true); if (!overlay) { this.create(opts); } if (opts.locked && this.fixed && obj.fixed) { if (!overlay) { this.margin = D.height() > W.height() ? $('html').css('margin-right').replace("px", "") : false; } obj.locked = this.overlay.append( obj.wrap ); obj.fixed = false; } if (opts.showEarly === true) { this.beforeShow.apply(this, arguments); } }, beforeShow : function(opts, obj) { var scrollV, scrollH; if (obj.locked) { if (this.margin !== false) { $('*').filter(function(){ return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") ); }).addClass('fancybox-margin'); this.el.addClass('fancybox-margin'); } scrollV = W.scrollTop(); scrollH = W.scrollLeft(); this.el.addClass('fancybox-lock'); W.scrollTop( scrollV ).scrollLeft( scrollH ); } this.open(opts); }, onUpdate : function() { if (!this.fixed) { this.update(); } }, afterClose: function (opts) { // Remove overlay if exists and fancyBox is not opening // (e.g., it is not being open using afterClose callback) //if (this.overlay && !F.isActive) { if (this.overlay && !F.coming) { this.overlay.fadeOut(opts.speedOut, $.proxy( this.close, this )); } } }; /* * Title helper */ F.helpers.title = { defaults : { type : 'float', // 'float', 'inside', 'outside' or 'over', position : 'bottom' // 'top' or 'bottom' }, beforeShow: function (opts) { var current = F.current, text = current.title, type = opts.type, title, target; if ($.isFunction(text)) { text = text.call(current.element, current); } if (!isString(text) || $.trim(text) === '') { return; } title = $('

' + text + '

'); switch (type) { case 'inside': target = F.skin; break; case 'outside': target = F.wrap; break; case 'over': target = F.inner; break; default: // 'float' target = F.skin; title.appendTo('body'); if (IE) { title.width( title.width() ); } title.wrapInner(''); //Increase bottom margin so this title will also fit into viewport F.current.margin[2] += Math.abs( getScalar(title.css('margin-bottom')) ); break; } title[ (opts.position === 'top' ? 'prependTo' : 'appendTo') ](target); } }; // jQuery plugin initialization $.fn.fancybox = function (options) { var index, that = $(this), selector = this.selector || '', run = function(e) { var what = $(this).blur(), idx = index, relType, relVal; if (!(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) && !what.is('.fancybox-wrap')) { relType = options.groupAttr || 'data-fancybox-group'; relVal = what.attr(relType); if (!relVal) { relType = 'rel'; relVal = what.get(0)[ relType ]; } if (relVal && relVal !== '' && relVal !== 'nofollow') { what = selector.length ? $(selector) : that; what = what.filter('[' + relType + '="' + relVal + '"]'); idx = what.index(this); } options.index = idx; // Stop an event from bubbling if everything is fine if (F.open(what, options) !== false) { e.preventDefault(); } } }; options = options || {}; index = options.index || 0; if (!selector || options.live === false) { that.unbind('click.fb-start').bind('click.fb-start', run); } else { D.undelegate(selector, 'click.fb-start').delegate(selector + ":not('.fancybox-item, .fancybox-nav')", 'click.fb-start', run); } this.filter('[data-fancybox-start=1]').trigger('click'); return this; }; // Tests that need a body at doc ready D.ready(function() { var w1, w2; if ( $.scrollbarWidth === undefined ) { // http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth $.scrollbarWidth = function() { var parent = $('

').appendTo('body'), child = parent.children(), width = child.innerWidth() - child.height( 99 ).innerWidth(); parent.remove(); return width; }; } if ( $.support.fixedPosition === undefined ) { $.support.fixedPosition = (function() { var elem = $('

').appendTo('body'), fixed = ( elem[0].offsetTop === 20 || elem[0].offsetTop === 15 ); elem.remove(); return fixed; }()); } $.extend(F.defaults, { scrollbarWidth : $.scrollbarWidth(), fixed : $.support.fixedPosition, parent : $('body') }); //Get real width of page scroll-bar w1 = $(window).width(); H.addClass('fancybox-lock-test'); w2 = $(window).width(); H.removeClass('fancybox-lock-test'); $("").appendTo("head"); }); }(window, document, jQuery));